<template>
  <div id="app" class="SkTakeNotesForm">
    <a-modal width="40%" title="新增" :visible="visible" @cancel="handleCancel" @ok="handleSubmit" :confirmLoading="confirmLoading">
      <j-form-container >
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="幼儿" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentId">
                <a-select v-model="model.studentId" placeholder="请选择幼儿姓名"  mode="multiple"  @change="getClassId">
                  <a-select-option v-for="item in studentList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select> 
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="记录属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recordType">
                <j-dict-select-tag placeholder="请选择记录属性" v-model="model.recordType" dictCode="record_type"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="记录时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recordTime">
                <j-date :showTime="true"  date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择记录时间" v-model="model.recordTime"  style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="精彩瞬间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId">
                <sk-upload ref="skUpload" :evaluationData="evaluationData" :selectDimensionalityStatus="selectDimensionalityStatus"  :stuMultiple="true" :fileMultiple="true" @photoData="getPhotoData"></sk-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-modal>
  </div>
</template>
<script>
import Vue from "vue";
import { USER_INFO } from "@/store/mutation-types"
import SkUpload from "@/components/skComponent/skUpload.vue"
import { httpAction, getAction , postAction} from '@/api/manage'
export default {
  name: 'SkTakeNotesForm',
  data() {
    return {
      model:{},
      validatorRules:{
        studentId: [
          { required: true, message: '请选择幼儿!'},
        ],
        recordTime: [
          { required: true, message: '请选择记录时间!'},
        ],
        recordType: [
          { required: true, message: '请选择记录属性!'},
        ],
      },
      visible:false,
      studentList:[],    //学生列表
      classId:[],
      studentPhoto:[],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading:false,
      selectDimensionalityStatus:false
    }
  },
  components: {
    SkUpload
  },

  filters: {},

  computed: {
    evaluationData:{
      get(){
        return {
          studentId:this.model.studentId,
          studentList:this.studentList
        }
      }
    }
  },

  created() {
    this.getStudentList()
  },

  activated() {},

  mounted() {},

  methods: {
    init(){
      this.visible = true;
      this.model = {}
      this.studentPhoto = []
    },
    // 获取学生列表
    getStudentList(){
      const url = "/management/skStudent/getStudentList";
      const params = {
        classId:Vue.ls.get(USER_INFO).classId
      }
      getAction(url,params).then((res)=>{
        if(res.success){
          this.studentList = res.result;
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 选择该学生所在的班级
    getClassId(e){
      this.selectDimensionalityStatus = true;
      this.classId = []
      e.forEach(el => {
        let studentItem = this.studentList.find(item=>item.id == el);
        this.classId.push({
          classId:studentItem.classId,
          studentId:studentItem.id
        });
      });
    },
    getPhotoData(data){
      this.studentPhoto = data;
    },
    handleCancel(){
      this.visible = false;
      this.$refs.skUpload.clearImgList();
    },
    handleSubmit(){
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$refs.skUpload.onSubmit();
          let data = [],flag = true;
          if (this.studentPhoto.length == 0) {
            this.$message.warning("请选择精彩瞬间！");
            return
          }
          this.confirmLoading = true;
          this.studentPhoto.forEach(item => {
            let urlArr = item.url.split(".");
            let suffix = urlArr[urlArr.length - 1];
            // 记录类型(1视频,2照片,3录音)
            let recordCategory;
            if (suffix == "mp4") {
              recordCategory = 1
            }
            if(suffix == "jpg" || suffix == "png"|| suffix == "jpeg" || suffix == "PNG"|| suffix == "JPG"|| suffix == "JPEG"){
              recordCategory = 2
            }
            if (suffix == "mp3") {
              recordCategory = 3
            }
            let idArr = []
            if (item.id) {
              idArr = item.id.split(",")
            }else{
              idArr = this.model.studentId
            }
            idArr.forEach(el => {
              let classIdItem = this.classId.find(j=>j.studentId == el)
              let json = {
                recordSource:1,   //0系统，1老师，2家长
                recordTime:this.model.recordTime,
                recordCategory:recordCategory,
                recordType:this.model.recordType,
                classId:classIdItem.classId,
                studentId:el,
                fileUrl:item.url
              }
              data.push(json)
            });
          });
          this.submit(data)
        }
      })
    },
    submit(data){
      const url = "/health/record/add"
      postAction(url,data).then((res)=>{
        if(res.success){
          this.$message.success(res.message);
          this.handleCancel()
          this.$emit("ok")
          this.$refs.skUpload.clearImgList();
        } else {
          this.$message.warning(res.message);
        }
        this.confirmLoading = false;
      }).catch((error)=>{
        this.confirmLoading = false;
        console.error(error);
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
